<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:void(0)">
						<div class="mui-media-body">
							<h1>{{content.title}}</h1>
                            <p class='mui-ellipsis'>
							<span>评论时间：{{content.addedTime | formatTime('YYYY-MM-DD')}}</span>
                            <span>点击：{{content.click}}</span>
                            </p>
						</div>
					</a>
				</li>
		</ul>
        <div class="thumbs">
            <vue-preview :slides="this.list" ></vue-preview>
        </div>
        <p class="p_content">{{content.content}}</p>
        <br><br><br>
        <comment :id="id"></comment>
    </div> 
</template>
<script>
import comment from './Comment.vue';
export default {
    data:function () {
        return{
            id:this.$route.params.id,
            url:[],
            content:{},
            list:[],
        }
    },
    components: {
        "comment":comment,
    },
    methods:{
        loadPreview:function () {
            this.$http.get('lib/interface6_preview.json').then(function (res) {
                if (res.body.status == "ok"){
                    this.list = res.body.urls[this.id-37];
                    this.list.forEach((item)=>{
                        item.w = 600;
                        item.h = 400;
                        item.src = item.url;
                        item.msrc = item.url;
                    });
                }
            });
        },
        loadIAT:function () {
            var com = this.$route.params.id;
            this.$http.get('lib/interface5_photourl.json').then(function (res) {
                if (res.body.status == "ok"){
                    res.body.photos.forEach((item)=>{
                        this.url = this.url.concat(item.urls);
                    });
                    this.content = this.url.filter((item)=>{
                        if(item.com == com){
                            return true;
                        }
                    });
                    this.content = this.content[0];
                }
            });
        }
    },
    created:function () {
        this.loadIAT();
        this.loadPreview();
    },
    mounted:function () {
        setTimeout(function () {
            document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 0;
        });
    }
}
</script>
<style lang="scss" scoped>
.mui-media-body{
    h1{
        margin: 10px 0 20px 0;
        font-size: 24px;
        font-weight: 650;
        text-align: center;
    }
    .mui-ellipsis {
        display: flex;
        justify-content: space-between;
    }
    p{
        color: #539dee;
        font-size: 12px;
    }
}
.p_content{
    margin: 18px;
    text-indent: 28px;
}
.thumbs {
    margin-top: 20px;
    margin-bottom: 30px;
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    padding-left: 6px;
    padding-right: -10px;
    figure {
        width: 31%;
        padding-bottom: 20px;
        margin-left: 5px;
        img {
        padding: 1px;
        box-shadow: 0 0 8px #999;
        width: 100%;
        height: 120%;
        }
    }
  }
}
</style>